import React, { useState } from 'react';
import { Image, View, Input } from '@tarojs/components';
import pSearch from '@/images/common/searchIcon.png';
import pClear from '@/images/common/searchClose.png';
import './index.scss';

const SearchNew = ({
  defaultValue = '',
  className = '',
  handleSearch = null,
  placeholder = '搜索门店名称',
  onClear = () => {},
}) => {
  const [searchValue, setSearchValue] = useState(defaultValue);

  const inputHandler = (e) => {
    setSearchValue(e.detail.value);
  };

  const inputClear = () => {
    setSearchValue('');

    onClear();
  };

  return (
    <View className={['search-wrap', className].join(' ')}>
      <Image className="searchIcon" src={pSearch} />
      <Input
        className="searchInput"
        type="text"
        confirmType="search"
        placeholder={placeholder}
        placeholderClass="inputPlaceholder"
        maxLength={16}
        value={searchValue}
        onConfirm={() => {
          handleSearch(searchValue);
        }}
        onInput={(e) => {
          inputHandler(e);
        }}
      />
      <View
        className={'searchClear ' + (searchValue.length > 0 ? 'show' : 'hidden')}
        onClick={inputClear}
      >
        <Image className="icon" src={pClear} />
      </View>
    </View>
  );
};

export default SearchNew;
